<template>
	<view class="ordermain">
		<custom-swiper ref="swiper" style="height: 100%;" :list="gltabs" :bold="true" :headIconShow="true" :headIconShowR="true">
			<template slot="l-icon">
				<view @click="toggleTab" class="xzsj f-y-c bf" style="height: 80rpx;">
					<view class="f-c-c">
						<text class="">{{ dateDef.startTime.substring(5, 10) }}</text>
						<text class="">{{ dateDef.endTime.substring(5, 10) }}</text>
					</view>
					<text class="iconfont icondown wei f22 c0 ml5"></text>
				</view>
			</template>
			<template slot="r-icon">
				<view class="ztdc bf" style="padding-top: 16rpx; font-size: 30rpx;height: 80rpx;">
					<view @click="go({ t: 1, url: '../order/out/ydd' })" class="f-c">
						<text>预订单</text>
						<text class="iconfont iconright wei f28"></text>
					</view>
				</view>
			</template>
			<template v-for="(item, index) of gltabs" :slot="'swiper-item-' + (index + 1)">
				<order-list :ref="'orderList' + (index + 1)" :state="index" type="3" :url-api="urlApi" :key="index" :data="dateDef"></order-list>
			</template>
		</custom-swiper>
	</view>
</template>

<script>
import CustomSwiper from '@/components/custom-tabs-page-linkge/tab-page-linkage.vue';
import OrderList from '@/components/template/order/order-list.vue';
export default {
	components: {
		CustomSwiper,
		OrderList
	},
	data() {
		return {
			urlApi:this.api.wmddlb,
			showrl: false,
			dateDef: {
				keyword:'',
				orderType: 1,
				timeType: 2,
				orderState: 1,
				serviceAt: 1,
				startTime: new Date().format('yyyy-MM-dd'),
				endTime: new Date().format('yyyy-MM-dd')
			},
			gltabs: [
				{
					name: '全部'
				},
				{
					name: '进行中'
				},
				{
					name: '已完成'
				},
				{
					name: '售后'
				}
			]
		};
	},
	methods: {
		toggleTab(str) {
			this.$emit('openTime')
		},
		change(e) {
			this.dateDef.startTime = e.startDate;
			this.dateDef.endTime = e.endDate;
			uni.$emit('refresh');
		},
		search(keyword){
			this.dateDef.keyword = keyword
			uni.$emit('refresh');
		},
		changePage(){
			this.$refs.swiper.change(0)
		}
	}
};
</script>

<style lang="scss" scoped>
.ordermain {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
}
/deep/.xzsj {
	min-width: 130rpx;
	justify-content: center;
	position: relative;

	&::before {
		content: '';
		display: block;
		position: absolute;
		right: 0rpx;
		height: 50rpx;
		width: 6rpx;
		border-radius: 50rpx;
		box-shadow: 2rpx 0 8rpx 0 rgba(0, 0, 0, 0.2);
		z-index: 1;
	}
	&::after {
		content: '';
		display: block;
		position: absolute;
		right: 0rpx;
		height: 80rpx;
		width: 12rpx;
		background-color: #ffffff;
		z-index: 4;
	}
}

/deep/.ztdc {
	position: relative;
	min-width: 130rpx;
	padding-left: 12rpx;
	
	&::before {
		content: '';
		display: block;
		position: absolute;
		left: 0rpx;
		height: 50rpx;
		width: 6rpx;
		border-radius: 50rpx;
		box-shadow: -2rpx 0 8rpx 0 rgba(0, 0, 0, 0.2);
		z-index: 1;
	}

	&::after {
		content: '';
		display: block;
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		height: 80rpx;
		width: 12rpx;
		background-color: #ffffff;
		z-index: 4;
	}
}
</style>
